import React from 'react'
import {connect,} from 'react-redux'
import {withRouter} from 'react-router-dom'
// antd-mobile
import {Carousel,} from 'antd-mobile'
import ImageCarouselItem from "./ImageCarouselItem/ImageCarouselItem";
// style sheet
import './ImageCarousel.css'
import {getDifferenceBetweenDates} from "../../../../../../utils/dateService";
import zhezao from '../../../../../../res/images/web/home/矩形@2x.png'
import {addHitCount} from "../../../../../../apis/goApis";
const sliderHeight = 'auto'
class ImageCarousel extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            slideIndex: 0,
            sliderHeight: sliderHeight,
            imgs: {},
        }
    }

    componentDidMount() {

        setTimeout(() => {
            this.resize()
        }, 100)
    }
    //
    // imageOnLoad = (e, index) => {
    //     window.dispatchEvent(new Event('resize'))
    //     this.setState({
    //         sliderHeight: '244px',
    //     })
    // }
    //
    resize = () => {
        window.dispatchEvent(new Event('resize'))
        this.setState({
            sliderHeight,
        })
    }

    goToNews = (news) => {
        addHitCount('news', {id: 0, title: news.title,})
        this.props.history.push(`./news/${news.id}`)
    }

    render() {

        // const carouselData = this.props.newsList
        const history = this.props.history
        // const sina = this.props.newsList

        let carouselData = this.props.newsList
            .filter(val => val.DetailImg !== null)
            .slice(0, 3)


        const images = carouselData.map((val, index) => {
            const {
                img,
                title,
                id,
                readnum,
                createt
            } = val
            const now = new Date()
            const creatAt = new Date(createt * 1000)
            const minBefore = getDifferenceBetweenDates(creatAt, now).minutesDiff
            const desc = <div style={{
                position: 'absolute',
                bottom: '12px',
                left: '12px',
                width: 'calc(100% - 24px)',
                padding: '4px 10px',
                background: `no-repeat url(${zhezao}) 50% 50%/cover`,
            }}>
                <p
                    className="news-card-title"
                    style={{color: '#fff', height: '44px',}}
                >{title}</p>
                <div className='flex-space-between-align-center'>
                    <span className='gray-text' style={{color: '#fff', opacity: '0.6',}}>{readnum} 阅读 | {minBefore}分钟前</span>
                </div>
            </div>
            return <div
                className='home-carousel'
                // onClick={() => {this.props.history.push(`./news/${id}`)}}
                onClick={() => this.goToNews(val)}
                style={{position: 'relative',padding: '12px', background: '#fff', height: this.state.sliderHeight}}
                key={index}
            >
                <div style={{
                    height: '200px',
                    width: '100%',
                    // backgroundColor: 'red',
                    backgroundImage: `url(${img})`,
                    backgroundRepeat: 'no-repeat',
                    backgroundSize: 'cover',
                    backgroundPosition: '50% 50%',
                    borderRadius: '4px',
                }}/>
                {desc}
                {/*<img className='home-carousel-item-cur' src={img} alt='' onLoad={(e) => this.imageOnLoad(e)}/>*/}
            </div>
            // <ImageCarouselItem
            //     val={val}
            //     slideIndex={this.state.slideIndex}
            //     index={index}
            //     key={index}
            //     imageOnLoad={this.imageOnLoad}
            //     history={history}
            // />)
        })

        return (
            <div style={{marginBottom: '9px'}}>
                <Carousel
                    className="antd-image-carousel"
                    // cellSpacing={-5}
                    autoplay={true}
                    autoplayInterval={2000}
                    slideWidth={1}
                    infinite
                    dots={true}
                    afterChange={index => this.setState({slideIndex: index,})}
                >
                    {images}
                </Carousel>
            </div>
        )
    }

}

const mapState = state => ({
    newsList: state.news.newsList,
    sinaNewsList: state.home.sinaNewsList,
})

export default connect(mapState)(withRouter(ImageCarousel))
